const app = getApp()

Page({

  data: {
    sysWidth: 0,
    sysHeight: 0,
    allNumber: 0,
    name: '初始值',
    overNumber: 66.6,
    listData: [{
      "province": "测试",
      "all": "3",
      "male": "2",
      "female": '1'
    }],
    shareTempFilePath: '',
    sharebtn: false
  },

  onLoad: function (options) {
    var that = this
    var data = JSON.parse(options.data)

    this.setData({
      sysWidth: app.globalData.systemInfo.windowWidth,
      sysHeight: app.globalData.systemInfo.windowHeight,
      name: data.name,
      listData: data.list,
      overNumber: data.rate,
      allNumber: data.all,
      sharebtn: app.globalData.share
    })

    // 画布默认效果
    var heightCell = that.data.sysHeight / 104
    const ctx = wx.createCanvasContext('canvas');
    ctx.drawImage('/images/warning.jpg', that.data.sysWidth * 0.35 + heightCell * 5, that.data.sysHeight * 0.35, heightCell * 11, heightCell * 11)
    ctx.setFontSize(heightCell * 3.3)
    ctx.setFillStyle('#cccccc')
    let beforetext = '查询结果生成中，请耐心等待'
    ctx.fillText(beforetext, (that.data.sysWidth - ctx.measureText(beforetext).width) / 3 + heightCell * 5, that.data.sysHeight * 0.55)
    ctx.stroke()
    ctx.draw()
    that.getTempFilePath();


    that.drawCanvas()

  },

  onShareAppMessage: function () {
    return {
      title: '快来看看全国有多少人跟你重名',
      imageUrl: '/images/share.jpg',
      path: '/pages/index/index'
    }
  },

  // canvas绘制数据
  drawCanvas: function () {
    var that = this
    var cell = that.data.sysHeight / 104
    that.setData({
      cell: that.data.sysHeight / 104
    })
    wx.showLoading({
      title: "搜索中",
    });
    const ctx = wx.createCanvasContext('canvas');
    // 背景
    ctx.drawImage('/images/result.png', cell * 2.5, 0, that.data.sysWidth - cell * 5, that.data.sysHeight - cell * 7);
    // 二维码
    setTimeout(() => {
      if (app.globalData.share) {
        ctx.drawImage('/images/erweima.jpg', cell * 5, cell * 5, cell * 11.7, cell * 11.7);
      }
    }, 300);
    // 姓名
    setTimeout(() => {
      ctx.setFontSize(cell * 5.7);
      ctx.setFillStyle('#FF9700');
      ctx.fillText(that.data.name, (that.data.sysWidth - ctx.measureText(that.data.name).width) / 2, cell * 11.7);
    }, 600);
    // 数量和姓名
    setTimeout(() => {
      ctx.setFontSize(cell * 3.4);
      ctx.setFillStyle('#333333');
      let allnumbertext = "全国共有" + that.data.allNumber + "个" + that.data.name;
      ctx.fillText(allnumbertext, (that.data.sysWidth - ctx.measureText(allnumbertext).width) / 2, cell * 19.7);
    }, 900);
    // 超越用户百分比
    setTimeout(() => {
      ctx.setFillStyle('#FF9700');
      let overtext = "超越了 " + that.data.overNumber + "% 的用户";
      ctx.fillText(overtext, (that.data.sysWidth - ctx.measureText(overtext).width) / 2, cell * 25.5);
    }, 1200);
    // 表头
    setTimeout(() => {
      ctx.setFontSize(cell * 2.4);
      ctx.setFillStyle('#999999');
      ctx.fillText('省份', (that.data.sysWidth - ctx.measureText('省份').width) / 4 - cell * 5.7, cell * 31.7);
      ctx.fillText('总人数', (that.data.sysWidth - ctx.measureText('总人数').width) / 2 - cell * 7.3, cell * 31.7);
      ctx.fillText('男生', (that.data.sysWidth - ctx.measureText('男生').width) / 2 + cell * 6.3, cell * 31.7);
      ctx.fillText('女生', (that.data.sysWidth - ctx.measureText('女生').width) / 4 * 3 + cell * 2.4, cell * 31.7);
    }, 1500);
    // 表格数据
    setTimeout(() => {
      let data = that.data.listData;
      let test = that.data.sysHeight / 22;
      let sysWidth = that.data.sysWidth;
      ctx.setFontSize(cell * 2.4);
      ctx.setFillStyle('#2b2b2b');
      for (let i = 0; i < data.length; i++) {
        ctx.setFontSize(cell * 2.4);
        ctx.setFillStyle('#2b2b2b');
        ctx.fillText(data[i].province, (sysWidth - ctx.measureText(data[i].province).width) / 4 - cell * 6.7, cell * 36.7 + i * test);
        ctx.fillText(data[i].all, (sysWidth - ctx.measureText(data[i].all).width) / 2 - cell * 7.3, cell * 36.7 + i * test);
        ctx.fillText(data[i].male, (sysWidth - ctx.measureText(data[i].male).width) / 2 + cell * 6.3, cell * 36.7 + i * test);
        ctx.fillText(data[i].female, (sysWidth - ctx.measureText(data[i].female).width) / 4 * 3 + cell * 2.4, cell * 36.7 + i * test);
      }
    }, 2000);
    // 页脚声明
    setTimeout(() => {
      ctx.setFontSize(cell * 2);
      ctx.setFillStyle('#ffffff');
      let text = '本页面数据摘取自网络'
      ctx.fillText(text, (that.data.sysWidth - ctx.measureText(text).width) / 2, that.data.sysHeight - cell * 9);
      // 绘制
      ctx.stroke();
      ctx.draw();
      that.getTempFilePath();
      wx.hideLoading();
    }, 2200);
  },

  getTempFilePath: function () {
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: (res) => {
          this.setData({
            shareTempFilePath: res.tempFilePath
          })
        }
      })
    }, 300);
  },

  // 点击图片保存本地
  saveImg: function () {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareTempFilePath,
      success: (res) => {
        wx.showToast({
          title: '图片已保存',
          icon: 'none',
          duration: 1500
        });
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },

  // 按钮保存图片到本地
  saveImgToLocal: function () {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareTempFilePath,
      success: (res) => {
        wx.showToast({
          title: '保存成功',
          icon: 'none',
          duration: 1500
        });
      },
      fail: (err) => {
        wx.showToast({
          title: '保存失败，请稍后再试',
          icon: 'none',
          duration: 1500
        });
      }
    })
  },

  //点击图片进行预览
  previewImg: function (e) {
    var img = this.data.shareTempFilePath
    wx.previewImage({
      current: img,
      urls: [img]
    })
  },

  // 回到首页
  toIndex: function () {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
})